<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        label-position="right"
        label-width="150px"
      >
        <h4 class="title_2">商机查询</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商机号" prop="buseoppCode">
              <el-input
                v-model="queryParams.buseoppCode"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机名称" prop="projectName">
              <el-input
                v-model="queryParams.projectName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机创建机构" prop="createBranchId">
              <el-select
                v-model="queryParams.createBranchId"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in branchIdOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="clientName">
              <el-input
                v-model="queryParams.clientName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码类型" prop="certType">
              <el-select
                v-model="queryParams.certType"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in certTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" prop="certNo">
              <el-input
                v-model="queryParams.certNo"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机创建人" prop="createName">
              <el-input
                v-model="queryParams.createName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总公司投标" prop="isQuote">
              <el-select
                v-model="queryParams.isQuote"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option label="全部" value="" />
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总部管理处室" prop="createSectionId">
              <el-select
                v-model="queryParams.createSectionId"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option label="重客" :value="1" />
                <el-option label="企客" :value="0" />
                <el-option label="三航" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="商机状态" prop="buseoppState">
              <CheckboxGroup v-model:values="queryParams.buseoppState" :options="checkboxGroupOptions"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否ESG项目" prop="esgProject">
              <el-select
                v-model="queryParams.esgProject"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机创建日期" prop="createTime">
              <el-date-picker v-model="queryParams.createTime" type="date" placeholder="请选择" style="width: 300px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计报价日期" prop="predictDate">
              <el-date-picker v-model="queryParams.predictDate" type="date" placeholder="请选择" style="width: 300px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批通过日期" prop="processEndTime">
              <el-date-picker v-model="queryParams.processEndTime" type="date" placeholder="请选择" style="width: 300px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中标日期" prop="awardDate">
              <el-date-picker v-model="queryParams.awardDate" type="date" placeholder="请选择" style="width: 300px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button icon="Search" type="primary" @click="getList">搜索</el-button>
        </el-row>
      </el-form>
  
      <span class="title_2 mb10">商机列表</span>
      <el-table 
        v-loading="loading" 
        :data="tableList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="商机号" align="center" prop="buseoppCode" min-width="130" :show-overflow-tooltip="true" />
        <el-table-column label="商机名称" align="center" prop="projectName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="客户名称" align="center" prop="clientName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="预计总保费（万元)" align="center" prop="predictPremium" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="目标保费（万元)" align="center" prop="buseoppStateStr" min-width="130" :show-overflow-tooltip="true" />
        <el-table-column label="商机状态" align="center" prop="buseoppStateStr" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="商机创建机构" align="center" prop="createBranchName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="总部管理处室" align="center" prop="createSectionName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="商机创建人" align="center" prop="createName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="商机创建时间" align="center" prop="createTime" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="预计报价日期" align="center" prop="predictDate" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="审批通过时间" align="center" prop="processEndTime" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="中标日期" align="center" prop="awardDate" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="证件号码类型" align="center" prop="certTypeName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="证件号码" align="center" prop="certNo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="中标保费（万元)" align="center" prop="bidAmount" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="是否ESG项目" align="center" prop="esgProject" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" fixed="right" min-width="150">
          <template #default="{row}">
            <el-button link type="primary" @click="toPage('details')">详情</el-button>
            <el-button link type="primary" @click="toPage('edit')" v-if="row.buseoppState=='1'">编辑</el-button>
            <el-button link type="primary" @click="toPage('approval')" v-if="row.buseoppState=='2'">审批</el-button>
            <el-button link type="primary" @click="toPage('follow')" v-if="row.buseoppState=='3'">跟进</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 10"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
    
  <script setup name="MyFollowing">
  import CheckboxGroup from '@/components/CheckboxGroup';
  const router = useRouter();
  
  const branchIdOptions = ref([
    { label: "总公司", value: 1 },
    { label: "武汉分公司", value: 2 },
  ]);
  const certTypeOptions = ref([
    { label: "统一社会信用代码", value: 1 },
    { label: "其他", value: 2 },
  ]);
  
  const toPage = (type) => {
    router.push({ path: "/business/"+type });
  };
  
  // 列表多选
  function handleSelectionChange(selection) {
    console.log(selection)
  }
  // 列表查询逻辑-start
  const loading = ref(false);
  const tableList = ref([]);
  const total = ref(0);
  const queryRef = ref(null);
  const checkboxGroupOptions = [
    { label: "全部", value: "all"},
    { label: "潜在商机", value: "1"},
    { label: "立项审批中", value: "2"},
    { label: "已审批跟进中", value: "3"},
    { label: "完成", value: "4"},
    { label: "失败", value: "5"},
  ]
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    certNo: "",
    createName: "",
    isQuote: "",
    createSectionId: "",
    buseoppState: [],
    esgProject: "",
    createTime: "",
    predictDate: "",
    processEndTime: "",
    awardDate: "",
  });
  const getList = () => {
    loading.value = true;
    setTimeout(() => {
      tableList.value = [
        {
          buseoppCode: 'OP20240809234324',
          projectName: '2022-2024某某商机投标',
          clientName: '中铁十七局集团有限公司',
          predictPremium: '86753.00',
          targetPremium: '3453.00',
          buseoppStateStr: '潜在商机',
          buseoppState: '1',
          createBranchName: '上海分公司',
          createSectionName: '基础建设客户处',
          createName: '张某军',
          createTime: '2022-08-09 15:31:34',
          predictDate: '2022-08-10 15:31:34',
          processEndTime: '2022-08-11 15:31:34',
          awardDate: '2022-08-12 15:31:34',
          certTypeName: '统一社会信用代码',
          certNo: '91140001100708439',
          bidAmount: '4568.00',
          esgProject: '是'
        },
        {
          buseoppCode: 'OP20240809234324',
          projectName: '2022-2024某某商机投标',
          clientName: '中铁十七局集团有限公司',
          predictPremium: '86753.00',
          targetPremium: '3453.00',
          buseoppStateStr: '立项审批中',
          buseoppState: '2',
          createBranchName: '上海分公司',
          createSectionName: '基础建设客户处',
          createName: '张某军',
          createTime: '2022-08-09 15:31:34',
          predictDate: '2022-08-10 15:31:34',
          processEndTime: '2022-08-11 15:31:34',
          awardDate: '2022-08-12 15:31:34',
          certTypeName: '统一社会信用代码',
          certNo: '91140001100708439',
          bidAmount: '4568.00',
          esgProject: '是'
        },
        {
          buseoppCode: 'OP20240809234324',
          projectName: '2022-2024某某商机投标',
          clientName: '中铁十七局集团有限公司',
          predictPremium: '86753.00',
          targetPremium: '3453.00',
          buseoppStateStr: '已审批跟进中',
          buseoppState: '3',
          createBranchName: '上海分公司',
          createSectionName: '基础建设客户处',
          createName: '张某军',
          createTime: '2022-08-09 15:31:34',
          predictDate: '2022-08-10 15:31:34',
          processEndTime: '2022-08-11 15:31:34',
          awardDate: '2022-08-12 15:31:34',
          certTypeName: '统一社会信用代码',
          certNo: '91140001100708439',
          bidAmount: '4568.00',
          esgProject: '是'
        },
        {
          buseoppCode: 'OP20240809234324',
          projectName: '2022-2024某某商机投标',
          clientName: '中铁十七局集团有限公司',
          predictPremium: '86753.00',
          targetPremium: '3453.00',
          buseoppStateStr: '完成',
          buseoppState: '4',
          createBranchName: '上海分公司',
          createSectionName: '基础建设客户处',
          createName: '张某军',
          createTime: '2022-08-09 15:31:34',
          predictDate: '2022-08-10 15:31:34',
          processEndTime: '2022-08-11 15:31:34',
          awardDate: '2022-08-12 15:31:34',
          certTypeName: '统一社会信用代码',
          certNo: '91140001100708439',
          bidAmount: '4568.00',
          esgProject: '是'
        },
      ];
      total.value = Number(tableList.value.length);
      loading.value = false;
    }, 300);
  };
  const resetQuery = (formEl) => {
    queryRef.value.resetFields();
    getList();
  };
  getList();
  // 列表查询逻辑-end
  </script>
    
  <style lang="scss" scoped>
  </style>
    